@import "../../../colors";
@import "../../../frameless";

#footer {
    .inner {
        ul {
            padding-left: 0;

            li {
                list-style-type: none;
            }
        }

        .collaborators {
            margin-top: 20px;
            border-bottom: 2px solid $ui-border;
            width: 100%;

            ul {
                margin: 5px 0;
                align-items: center;
                justify-content: space-between;

                img {
                    margin: 20px 0;
                    max-width: 180px;
                    max-height: 30px;
                }
            }

            .intel {
                img {
                    max-height: 50px;
                }
            }

            .siegel {
                img {
                    max-height: 60px;
                }
            }
            .cartoon-network {
                img {
                    min-height: 50px;
                }
            }
        }

        .scratch-links {
            margin-top: 25px;
            justify-content: space-between;
            align-items: flex-start;

            @media #{$medium-and-smaller} {
                align-items: center;
            }
        }

        .family {
            width: $cols6;

            .flex-row {
                justify-content: space-between;
                align-items: flex-start;

                ul {
                    align-items: flex-start;
                }

                li {
                    margin: 0;
                }
            }
        }

        .media {
            width: $cols4;
            text-align: center;

            .contact-us {
                text-align: left;
            }

            ul {
                justify-content: flex-start;
            }

            li {
                margin-right: 10px;
                border-radius: 20px;
                background-color: $ui-blue;
                padding: 5px;
                width: 20px;
                height: 20px;

                &:hover {
                    background-color: $ui-orange;
                }

                img {
                    width: 20px;
                }
            }
        }

        @media #{$medium-and-smaller} {
            text-align: center;

            .family {
                display: none;
            }

            .media {
                .contact-us {
                    text-align: center;
                }

                .flex-row {
                    flex-direction: row;
                    justify-content: center;
                }
            }
        }

        @media #{$intermediate} {
            ul {
                li {
                    margin-left: 0;
                }
            }

            .collaborators {
                h4 {
                    text-align: center;
                }

                ul {
                    justify-content: center;

                    li {
                        margin: 0 15px;
                    }

                    img {
                        margin: 20px 0;
                        max-width: 180px;
                        max-height: 30px;
                    }
                }
            }

            .scratch-links {
                flex-wrap: nowrap;
                align-items: flex-start;
                justify-content: space-between;

                .family {
                    width: $cols6;
                }

                .media {
                    width: 10em;
                }
            }
        }
    }

    .language-chooser {
        text-align: center;
    }

    .organized-by-message {
        font-size: .875rem;
        margin: 0 auto;
        text-align: center;
        padding: 1rem 0 2.5rem;
        line-height: 1.5em;
    }
}
